import { memo, useState, useEffect, useCallback, useRef } from 'react'
import { Container, TopDesc, Menu, SongList, SongItem } from './style'
import { CSSTransition } from 'react-transition-group'
import Header from '../../baseUI/header'
import Scroll from '../../baseUI/scroll/index'
import { getName } from '../../api/utils'
import { connect } from 'react-redux'
import * as actionCreator from './store/actionCreator'
import { isEmptyObj } from '../../api/utils'
import Loading from '../../baseUI/loading/index'

const mapStateToProps = state => ({
  currentAlbum: state.getIn(['album', 'currentAlbum']).toJS(),
  enterLoading: state.getIn(['album', 'enterLoading'])
})

const mapDispatchToProps = dispatch => ({
  getAlbumDispatch(id) {
    dispatch(actionCreator.changeEnterLoading(true))
    dispatch(actionCreator.getAlbumList(id))
  }
})

function Album(props) {
  const id = props.match.params.id
  let { currentAlbum, enterLoading } = props
  const { getAlbumDispatch } = props
  const [showStatus, setShowStatus] = useState(true)

  const handleBack = useCallback(() => {
    setShowStatus(false)
  })

  const container = useRef()

  useEffect(() => {
    getAlbumDispatch(id)
  }, [getAlbumDispatch, id])

  const renderTopDesc = () => (
    <TopDesc background={currentAlbum.coverImgUrl}>
      <div className="background">
        <div className="filter"></div>
      </div>
      <div className="img_wrapper">
        <div className="decorate">
          <img src={currentAlbum.coverImgUrl} alt="" />
          <div className="play_count">
            <i className="iconfont play">&#xe600;</i>
            <span className="count">
              {Math.floor(currentAlbum.subscribedCount / 1000) / 10}万
            </span>
          </div>
        </div>
      </div>
      <div className="desc_wrapper">
        <div className="title">{currentAlbum.name}</div>
        <div className="person">
          <div className="avatar">
            <img src={currentAlbum.creator.avatarUrl} alt="" />
          </div>
          <div className="name">{currentAlbum.creator.nickname}</div>
        </div>
      </div>
    </TopDesc>
  )

  const renderMenu = () => (
    <Menu>
      <div>
        <i className="iconfont">&#xe617;</i>
        评论
      </div>
      <div>
        <i className="iconfont">&#xe613;</i>
        点赞
      </div>
      <div>
        <i className="iconfont">&#xe711;</i>
        收藏
      </div>
      <div>
        <i className="iconfont">&#xe689;</i>
        更多
      </div>
    </Menu>
  )
  // 刚开始为fly appear
  // 然后变更为fly appear appear-active
  // 最后class为fly appear appear-done enter-done
  return (
    <CSSTransition
      in={showStatus}
      timeout={300}
      className="fly"
      appear={true}
      unmountOnExit
      onExited={props.history.goBack}
    >
      <Container ref={container}>
        <Header title={'返回'} handleClick={handleBack}></Header>
        {!isEmptyObj(currentAlbum) ? (
          <Scroll bounceTop={false}>
            <div>
              {renderTopDesc()}
              {renderMenu()}
              <SongList>
                <div className="first_line">
                  <div className="play_all">
                    <i className="iconfont">&#xe640;</i>
                    <span>
                      播放全部
                      <span className="sum">
                        共 {currentAlbum.tracks.length} 首
                      </span>
                    </span>
                  </div>
                </div>
                <SongItem>
                  {currentAlbum.tracks.map((item, index) => {
                    return (
                      <li key={index}>
                        <span className="index">{index + 1}</span>
                        <div className="info">
                          <span>{item.name}</span>
                          <span>
                            {getName(item.ar)}- {item.al.name}
                          </span>
                        </div>
                      </li>
                    )
                  })}
                </SongItem>
              </SongList>
            </div>
          </Scroll>
        ) : null}
        {enterLoading ? <Loading></Loading> : null}
      </Container>
    </CSSTransition>
  )
}

export default connect(mapStateToProps, mapDispatchToProps)(memo(Album))
